<template>
  <el-card>
    <div slot="header">
      <h3>原材料价格走势</h3>
    </div>
    <el-row type="flex" justify="end">
      <el-button
        type="text"
        size="small"
        @click="handleViewDetail"
        >查看明细</el-button
      >
      <el-button type="text" size="small" @click="$router.go(-1)"
        >返回</el-button
      >
    </el-row>
    <div v-loading="loading" id="priceChart"></div>
    <PriceDetail
      :visible.sync="dialogVisible"
      :chartsInfo="chartsInfo"
    />
  </el-card>
</template>
<script>
import PriceDetail from './components/PriceDetail.vue'
import { setAuthBtnId } from '@/utils/bizUtils';
import { queryMaterialPriceChartService } from '@/api/finance/rawMaterialManage/rawMaterial';
export default {
  components: {
    PriceDetail
  },
  data () {
    return {
      rawMaterialId: null,
      loading: false,
      dialogVisible: false,
      title: '原材料价格浮动',
      xData: [],
      yData: [],
      dateObj: {
        updatedTimeStart: '',
        updatedTimeEnd: '',
      },
      chartsInfo: {}
    }
  },
  mounted () {
    const { id } = this.$route.query;
    this.rawMaterialId = id;
    this.getTableData()
  },
  methods: {
    // 获取表格数据
    async getTableData () {
      setAuthBtnId();
      const { retData } = await queryMaterialPriceChartService(
        { rawMaterialId: this.rawMaterialId },
        state => { this.loading = state }
      );
      if (retData) {
        const { date, price } = retData;
        this.xData = date;
        this.yData = price;
        this.dateObj = {
          updatedTimeStart: date[0],
          updatedTimeEnd: date[date.length - 1]
        }
        this.initChart()
      }
    },
    handleViewDetail () {
      this.dialogVisible = true;
      this.chartsInfo = {
        ...this.dateObj,
        rawMaterialId: this.rawMaterialId
      }
    },
    initChart () {
      // 获取组件实例
      const mychart = this.$echarts.init(document.getElementById('priceChart'));
      const option = {
        title: {
          left: 'center',
          text: this.title
        },
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        /* dataset: {
          // 提供一份数据。
          source: [
            ['Mon', 820],
            ['Tue', 932],
            ['Wed', 901],
            ['Thu', 934],
            ['Fri', 1290],
            ['Sat', 1330],
            ['Sun', 1320]
          ]
        }, */
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            data: this.yData,
            type: 'line',
            smooth: true
          }
        ]
      };
      if (option && typeof option === 'object') {
        mychart.setOption(option);
      }
      let that = this;
      mychart.on('datazoom', function (params) {
        that.$nextTick(() => {
          const { startValue, endValue } = mychart.getModel().option.dataZoom[0];
          that.dateObj = {
            updatedTimeStart: that.xData[startValue],
            updatedTimeEnd: that.xData[endValue]
          }
        })
      })
      window.addEventListener('resize', mychart.resize);
    }
  }
}
</script>
<style scoped>
  #priceChart {
    width: 100%;
    height: 500px;
  }
</style>
